<template>
    <div class="navlist">
        <el-container>
            <el-container height="100vh">
                <el-aside width="auto">
                    <Nav :userData='userData' @child-clicked="handleChildClick"></Nav>
                </el-aside>
                <el-main>
                    <Header :userData='userData' :navId="navid" style="position: sticky;top: 0;"></Header>
                    <component :is="getComponent" :userData="userData"></component>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import Nav from '../../components/Nav/index'
import Header from '@/components/header/index.vue'


export default {
    name: 'HomePage',
    components: {
        Nav,
        Header
    },
    data() {
        return {
            NavFlag: '-',
            userData: {},
            navid: ''
        };
    },
    computed: {
        getComponent() {
            switch (this.NavFlag) {
                case '-': return () => import('./home.vue');
                case '1-7': return () => import('@/pages/guanyuwomen');
                case '2-8': return () => import('@/pages/fuwu8');
                case '2-9': return () => import('@/pages/fuwu9');
                case '2-10': return () => import('@/pages/fuwu10');
                case '2-11': return () => import('@/pages/fuwu11');
                case '2-12': return () => import('@/pages/fuwu12');
                case '2-13': return () => import('@/pages/fuwu13');
                case '2-14': return () => import('@/pages/fuwu14');
                case '2-15': return () => import('@/pages/fuwu15');
                case '2-16': return () => import('@/pages/fuwu16');
                case '2-17': return () => import('@/pages/fuwu17');
                case '3-18': return () => import('@/pages/kehu18');
                case '4-19': return () => import('@/pages/xinwen19');
                case '5-20': return () => import('@/pages/shiye20');
                case '5-21': return () => import('@/pages/shiye21');
                case '6-22': return () => import('@/pages/lianluo22');
                case '29-30': return () => import('@/pages/caidan30');
                case '888-999': return () => import('@/pages/shouye');
                default: return null;
            }
        }
    },
    created() {
        this.userData = JSON.parse(window.localStorage.getItem('user'))
    },
    mounted() {
    },

    methods: {
        handleChildClick(index) {
            this.NavFlag = index
            this.navid = index
            console.log(index, 'ssss');
        }
    },
};
</script>

<style lang="less" scoped>
.navlist {
    .el-header {
        padding: 0;
    }

    .el-footer {
        background-color: #0e183b;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #fff;
        color: #333;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-card__body,
    .el-main {
        padding: 0 !important;
    }
}
</style>
<style>
.el-dialog__body {
    padding: 0 10px;
}
</style>